<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的入门案例</title>
        <!-- 第1步：引入vue.js的脚本 -->
        <script type="text/javascript" src="../plugins/vue/vue.js"></script>
    </head>
    <body>
        <!--
            针对前端问题的排错技巧：
                1. 当页面中没有显示  预想中的效果时，按下面步骤逐步分析：
                      1.1 先检查页面是否加载的是你想检查的页面（有时候，我们可能修改的页面和访问的页面并不是同一个）
                      1.2 如果仍有问题，再排查是否html页面加载时，出现了访问失败的问题（解决：在body的任何地方，随便写点内容，看页面是否能显示）
                      1.3 检查要显示的内容，最近的html标签（div id='app"），是否有进行什么处理？（在这里，我们进行的处理：将div与vue进行绑定）
        -->


        <!-- 第2步：在<body>标签下面创建一个<div id="app"> -->
        <div id="app">

           在vue中中''表示的是显示vue中定义的变量的值或方法返回的值 ： {{message}} <br/>

            <!-- 双向绑定，在vue中，使用的组件：v-model 。
                特点：
                    1. 当v-model绑定的html标签内容发生变化时，message这个变量值，会跟着变
                    2. 当message的值发生变化时，v-model绑定的input标签内容也会跟着变
                     典型效果代码：在页面加载后，会有一个默认值
                     -->
            <input v-model="message">

        </div>

    </body>
    <script>
        /* 3. 在js脚本中，添加一个绑定vue到id=app的根标签*/
        new Vue({
            el: "#app",//注意注意注意：el---> element（元素）：它是用来绑定标签，明确vue的使用范围
            data: {//这里是vue语法中的变量保存的位置
                message:"我是一个vue语法中定义的变量"
            },
            methods: {//这里是vue语法中的js方法

            }

        })


    </script>
</html>
